<template>
    <div class="list">
      <ul class="list-container">
        <li class="list-item" v-for="list in listData">
          <figure class="list-img-wrapper">
            <img :src="list.pic"/>
          </figure>
          <section class="content">
            <h3 class="name">{{list.name}}</h3>
            <p class="supplement">{{list.location}}</p>
            <p class="detail"><span>{{}}</span><span></span></p>
          </section>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "list",
      props: {
        listData: {
          type: Array,
          default: null
        }
      },
      data () {
        return {
          virtualData: [
            {
              "name": "广东省广州市增城市镇龙敬老院",
              "pic": "",
              "level": "2",
              "selectedNum": "",
              "location": "广东省广州市增城市中新镇镇龙村"
            },
            {
              "name": "广东省广州市增城市正果镇敬老院",
              "pic": "",
              "location": "广东省广州市增城市中新镇镇龙村"
            },
            {
              "name": "广东省广州荔城镇人民政府敬老院",
              "pic": "",
              "location": "广东省广州市增城市中新镇镇龙村"
            },
            {
              "name": "广东省广州市增城市宁西敬老院",
              "pic": "",
              "location": "广东省广州市增城市中新镇镇龙村"
            },
            {
              "name": "广东省广州市增城中新镇敬老院",
              "pic": "",
              "location": "广东省广州市增城市中新镇镇龙村"
            },
            {
              "name": "广东省广州市增城市永和敬老院",
              "pic": "",
              "location": "广东省广州市增城市中新镇镇龙村"
            }
          ]
        }
      },
      created () {
        this.listData = this.virtualData
      }
    }
</script>

<style scoped lang="scss">
  @import "../../common/sass/mixin";
  .list{
    .list-container{
      .list-item{
        .list-img-wrapper{
          img{

          }
        }
        .content{
          .name{

          }
          .detial{

          }
        }
      }
    }
  }
</style>
